<template>
  <div class="IdCardFormBox">
    <div class="id-card-info">
      <el-form :rules="rules" label-width="120px" ref="form" size="small" class="id-card-info-from" :model="idCardInfo">
        <el-col :span="20">
          <el-form-item size="small" label="身份证号:" prop="idCard">
            <el-input v-model="idCardInfo.idCard" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item size="small" label="出生日期:" prop="birthDay">
            <el-input v-model="idCardInfo.birthDay" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item size="small" label="性别:" prop="sex">
            <el-input v-model="idCardInfo.sex" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item size="small" label="姓名:" prop="name">
            <el-input v-model="idCardInfo.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
            <el-form-item label="民族:" prop="nationalityDisplay">
              <el-select v-model="idCardInfo.nationalityDisplay" placeholder="请选择民族">
                <el-option v-for="item in options['nationality']" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item size="small" label="住址:" prop="address">
            <el-input v-model="idCardInfo.address"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item size="small" label="发证机关:" prop="distDeprt">
            <el-input v-model="idCardInfo.distDeprt"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="证件长期有效:" >
            <el-switch v-model="isForever" @change="handleChangeEnd"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item size="small" label="证件办理时间:" prop="certStartDate">
            <el-date-picker
              v-model="idCardInfo.certStartDate"
              type="date"
              :picker-options="stratPickerOptions"
              value-format="yyyy/MM/dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col v-if="!isForever" :span="20">
          <el-form-item size="small" label="证件到期时间:" prop="certEndDate">
            <el-date-picker
              v-model="idCardInfo.certEndDate"
              type="date"
              :picker-options="endPickerOptions"
              value-format="yyyy/MM/dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stratPickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6
        }
      },
      endPickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e6
        }
      },
      isForever: false,
      options: this.$store.state.dict.options,
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' },
        ],
        distDeprt: [
          { required: true, message: '请输入发证机关', trigger: 'blur' },
        ],
        certStartDate: [
          { required: true, message: '请选择身份证办理时间', trigger: 'change' },
        ],
        certEndDate: [
          { required: true, message: '请选择身份证过期时间', trigger: 'change' },
        ],
        nationalityDisplay: [
          { required: true, message: '请选择民族', trigger: 'change' },
        ],
      }
    };
  },
  mounted() {},
  props: ['idCardInfo'],
  methods: {
    handleChangeEnd(value){
      this.isForever = value
      if(this.isForever){
        this.idCardInfo.certEndDate = "长期"
      } else{
        this.idCardInfo.certEndDate = null
      }
    }
  }
};
</script>
<style scoped>
.IdCardFormBox .el-select {
  min-width: 250px !important;
  width: 100%;
}
.IdCardFormBox .el-input {
  min-width: 250px !important;
  width: 100%;
}
.IdCardFormBox .id-card-info-from {
  margin-top: 10px !important;
}
.IdCardFormBox {
  background-color: #fff;
  width: 100%;
  overflow: hidden;
}
</style>